<template>
  <el-row>
    <el-col :span="6">
      <span class="text-sm">{{ $t('pageNetwork.hostname') }}</span>
      <el-button type="text" class="ml-1.5" @click="initSettingsModal">
        <el-icon style="vertical-align: middle">
          <edit />
        </el-icon>
      </el-button>
      <div class="text-sm">{{ firstInterface.hostname }}</div>
    </el-col>
    <el-col :span="6">
      <div class="text-sm">{{ $t('pageNetwork.useDomainName') }}</div>
      <el-switch v-model="useDomainNameState" @change="changeDomainNameState" />
      <span v-if="useDomainNameState">
        {{ $t('global.status.enabled') }}
      </span>
      <span v-else>{{ $t('global.status.disabled') }}</span>
    </el-col>
    <el-col :span="6">
      <div class="text-sm">{{ $t('pageNetwork.useDns') }}</div>
      <el-switch v-model="useDnsState" @change="changeDnsState" />
      <span v-if="useDnsState">
        {{ $t('global.status.enabled') }}
      </span>
      <span v-else>{{ $t('global.status.disabled') }}</span>
    </el-col>
    <el-col :span="6">
      <div class="text-sm">{{ $t('pageNetwork.useNtp') }}</div>
      <el-switch v-model="useNtpState" @change="changeNtpState" />
      <span v-if="useNtpState">
        {{ $t('global.status.enabled') }}
      </span>
      <span v-else>{{ $t('global.status.disabled') }}</span>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import { Edit } from '@element-plus/icons-vue';
import { useNetworkStore } from '@/store/Settings/NetworkStore';

const networkStore = useNetworkStore();
await networkStore.getEthernetData();

const firstInterface = computed(() => networkStore.globalNetworkSettings[0]);

const useDomainNameState = computed({
  get() {
    return networkStore.globalNetworkSettings[0].useDomainNameEnabled;
  },
  set(newValue: any) {
    return newValue;
  },
});

const useDnsState = computed({
  get() {
    return networkStore.globalNetworkSettings[0].useDnsEnabled;
  },
  set(newValue: any) {
    return newValue;
  },
});
const useNtpState = computed({
  get() {
    return networkStore.globalNetworkSettings[0].useNtpEnabled;
  },
  set(newValue: any) {
    return newValue;
  },
});

const emit = defineEmits(['open-host-modal']);

const changeDomainNameState = (state: any) => {
  networkStore
    .saveDomainNameState(state)
    .then((message: string) =>
      ElNotification({
        title: 'Success',
        message,
        type: 'success',
      }),
    )
    .catch(({ message }: { message: string }) =>
      ElNotification({
        title: 'Error',
        message,
        type: 'error',
      }),
    )
    .finally(() => {
      networkStore.getEthernetData();
    });
};
const changeDnsState = (state: any) => {
  networkStore
    .saveDnsState(state)
    .then((message: string) =>
      ElNotification({
        title: 'Success',
        message,
        type: 'success',
      }),
    )
    .catch(({ message }: { message: string }) =>
      ElNotification({
        title: 'Error',
        message,
        type: 'error',
      }),
    )
    .finally(() => {
      networkStore.getEthernetData();
    });
};
const changeNtpState = (state: any) => {
  networkStore
    .saveNtpState(state)
    .then((message: string) =>
      ElNotification({
        title: 'Success',
        message,
        type: 'success',
      }),
    )
    .catch(({ message }: { message: string }) =>
      ElNotification({
        title: 'Error',
        message,
        type: 'error',
      }),
    )
    .finally(() => {
      networkStore.getEthernetData();
    });
};

const initSettingsModal = () => {
  emit('open-host-modal');
};
</script>
